
<template>
<div id="body">
<div class="logo" id="logos">
  <img src="./assets/logo.png" alt="" @click="toIndex">
  <p style="margin-top: -70px;margin-left: 500px;font-size: 20px">debug电脑商城——————</p>
  <p style="margin-top: -10px;margin-left: 700px;font-size: 15px">一站式电脑配件购物中心</p>
  <el-switch v-model="isDark" inline-prompt
             active-color="var(--el-fill-color-dark)"
             inactive-color="var(--el-color-primary)"
             active-text="打开"
             inactive-text="关闭"
             @change="toggleDark"  style="left:130px;top: -80px"/>
</div>

<!--  <LoginVue/>-->
  <router-view></router-view>
</div>

</template>
<script setup>

import {useDark, useToggle} from "@vueuse/core";
import {onMounted, ref} from "vue";
import emitter from './utils/buts'
import {useBlackSotre} from '@/stores/black'
const isDark = useDark()
const isBlack = useBlackSotre()
const toggleDark = () =>{

  let element = document.getElementById('body');
  let element2 = document.getElementById('logos');
  if (isBlack.black===false){
    element.style.backgroundColor = 'white';
    element2.style.background = 'linear-gradient(90deg,#EE82EE 0%,#FFFFFF 1.83%,#FFFFFF 6%,#00D1FF 100%)';
    click('light')
    isBlack.setBlack()
  }else {
    element.style.backgroundColor = '#363636';
    element2.style.background = 'linear-gradient(0deg,#060505 0%,#E3EEFF 100%)';
    click('dark')
    isBlack.setBlack()
  }
  useToggle(isDark)
}
const click=(data)=>{
  emitter.emit('chart',data)
  emitter.emit('login')
}
onMounted(()=>{
  if (isBlack.black===true){
    let element = document.getElementById('body');
    let element2 = document.getElementById('logos');
    element.style.backgroundColor = '#363636';
    element2.style.background = 'linear-gradient(0deg,#060505 0%,#E3EEFF 100%)';
  }
})
//点击图片跳转主页
import {useRouter} from 'vue-router'
const router = useRouter()
const toIndex=()=>{
  router.push('/')
}
</script>

<style >
.logo{
  height: 120px;
  background: linear-gradient(90deg,#EE82EE 0%,#FFFFFF 1.83%,#FFFFFF 6%,#00D1FF 100%);
  border-radius:10px;
  img{
    margin-top: 10px;
    margin-left: 10px;
    width: 100px;
    height: 100px;
    border-radius:10%;
  }
}
</style>
<script setup>
</script>